<template>
	<view>
		<view class="li_info l_bm" v-if="item">
			<view class="fc">
				<image class="avatar" :src="item.avatar"></image>
				<view>
					<view class="nickname" v-if="item.users">{{item.users.nickname}}</view>
					<view class="time">{{item.createtime}}</view>
				</view>
				<view @click="$project.toPhone(item.mobile)" class="fc phone_box" v-if="item.mobile">
					<u-icon name="phone-fill" color="white" size="24"></u-icon>
					<view class="phone_name">电话</view>
				</view>
			</view>
			<view class="name">
				{{item.name}}
			</view>

			<view class="fcw">
				<view :class="[item.images.length>1?'img_box':'']" @click="setImgVideo(items)"
					v-for="(items,indexs) in item.images" :key="indexs">
					<image class="i_img" v-if="items.type==1&&item.images.length>1" :src="items.url"></image>
					<image :style="'width:'+items.width+'px'" mode="widthFix"
						v-if="items.type==1&&item.images.length==1" :src="items.url"></image>
					<video class="i_img" :src="items.url" v-if="items.type==2&&item.images.length>1&&items.url"></video>
					<view class="v_box" :style="'width:'+items.width+'px;'+'height:'+items.height+'px;'"
						v-if="items.type==2&&item.images.length==1">
						<view class="play_img_box">
							<image class="play_img" :src="play_img" mode="widthFix"></image>
						</view>

						<video :show-center-play-btn="false" object-fit="cover" :controls="false" v-if="items.url"
							class="ii_video" :src="items.url"></video>

					</view>

				</view>
			</view>

			<view class="make_box">
				<button open-type="share">
					<view class="fc minfo">
						<view>分享</view>
						<u-icon color="#616161" class="minfo" name="zhuanfa" size="34"></u-icon>
					</view>
				</button>
				<view class="fc minfo" @click="isDz(item)">
					<view>点赞</view>
					<u-icon color="#616161" class="minfo" v-if="item.dz<1" name="thumb-up " size="34"></u-icon>
					<u-icon class="minfo" v-else color="#FC742A" name="thumb-up-fill" size="34"></u-icon>
				</view>
			</view>
		</view>

		<view class="preview-full" v-if="previewVideoSrc!=''">
			<video :autoplay="true" :src="previewVideoSrc" :show-fullscreen-btn="false">
				<cover-view class="preview-full-close" @click="previewVideoSrc=''"> ×
				</cover-view>
			</video>
		</view>

		<view class="pl_box" v-if="myInfo&&userInfo">
			<CComment ref="ccRef" :myInfo="myInfo" :userInfo="userInfo" :tableData="tableData"
				:tableTotal.sync="tableTotal" :deleteMode="deleteMode" @likeFun="likeFun" @replyFun="replyFun"
				@deleteFun="deleteFun"></CComment>

		</view>
		<view style="height: 100rpx;"></view>
		<view class="btn" @tap="openComment">发表新评论</view>
	</view>
</template>

<script>
	import CComment from "@/components/cc-comment/cc-comment.vue";
	export default {
		components: {
			CComment
		},
		data() {
			return {
				params: {
					type: '',
					id: '',
					page: 1
				},
				item: '',
				previewVideoSrc: '',
				myInfo: '',
				userInfo: '',
				deleteMode: "all", //删除模式
				// 评论总数
				tableTotal:0,
				// 评论表
				tableData: [],
			}
		},
		onLoad(e) {
			if (e.type) this.params.type = e.type;
			if (e.id) this.params.id = e.id;
			this.getInfo();
			this.getList();
		},
		methods: {
			getList() {
				this.params.page = 1;
				this.$get(this.$api.qzplList, this.params, res => {
					let data = res.data;
					this.tableData = data.data.data;
					this.tableTotal = data.data.total;
				});
			},
			likeFun({
				params
			}, callback) {
				console.log("likeFun", params);
				// 当请求失败, 调用callback重置点赞效果;
				// Demo如下:
				// axios.post("http://xxx/like", { id: params }).then((res) => {
				//   if (res.code !== 0) {
				//     callback(res);
				//   }
				// });
			},
			// 评论回调事件
			replyFun({
				params
			}, callback) {
				
				console.log(params);
				
				params.tz_id = this.params.id;
				params.type = this.params.type;
				this.$post(this.$api.qzPl, params, res => {
					let {
						code,
						data,
						msg
					} = res.data;

					if (code == 1) {
						callback(data);
					} else {
						this.$Toast(msg);
					}
				});

			},
			deleteFun({
				params,
				mode
			}, callback) {
				console.log("deleteFun", {
					params,
					mode
				});
				
				let ids=params.join(',');
				
				this.$post(this.$api.qzDelPl,{ids:ids,type:this.params.type},res=>{
					  let {code,msg}=res.data;
					  if(code==1){
						  callback();
					  }else{
						  this.$Toast(msg);
					  }
				});
			},

			openComment() {
				let ccRef = this.$refs["ccRef"];
				ccRef.newCommentFun();
			},
			setImgVideo(e) {
				if (e.type == 1) {
					uni.previewImage({
						urls: [e.url]
					});
				} else {
					this.previewVideoSrc = e.url;
				}
			},
			isDz(e) {
				let _ = this;
				this.$needLogin(() => {
					//_.$project.common(_.user,3);
					//if(_.user.audit_status!=2) return;
					_.setDz(e);
				}, 2, '/pages/tabar/qz');
			},
			setDz(e) {
				this.$post(this.$api.qzDz, {
					type: this.params.type,
					id: this.params.id
				}, res => {
					let data = res.data;
					if (data.code == 1) {
						e.dz = data.data.status;
						this.$Toast(data.msg);
					}
				});
			},
			getInfo() {
				this.$get(this.$api.qzInfo, this.params, res => {
					let {
						data,
						code
					} = res.data;
					if (code == 1) {
						this.item = data.item;
						this.userInfo = data.userInfo;
						this.myInfo = data.myInfo;
					}
				})
			}
		},
		onShareAppMessage() {
			return {
				path: '/pages/tabar/qz?id=' + this.params.id + '&type=' + this.params.type
			}
		},
	}
</script>

<style lang="scss" scoped>
	.fc {
		display: flex;
		align-items: center;
	}

	.fcw {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.fcs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.icon {
		width: 80rpx;
	}

	.icon_box {
		text-align: center;
	}

	.close_box {
		box-sizing: border-box;
		padding: 50rpx 0 0 0;
		text-align: center;
	}

	.li_info {
		background-color: white;
		box-sizing: border-box;
		padding: 0 30rpx 30rpx 30rpx;
	}

	.l_bm {
		border-bottom: 1rpx solid #E7E7E7;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
		margin-right: 15rpx;
	}

	.nickname {
		color: #616D90;
		font-size: 32rpx;
	}

	.time {
		font-size: 26rpx;
		color: #929091;
	}

	.name {
		box-sizing: border-box;
		padding: 30rpx 0 10rpx 0;
		color: black;
		font-size: 32rpx;
	}

	.img_box {
		width: 32.5%;
		height: 220rpx;
		margin-right: 0.83%;
		margin-top: 20rpx;
	}

	.i_img {
		width: 100%;
		height: 100%;
	}

	.i_video {
		background-color: black;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.make_box {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		box-sizing: border-box;
		padding: 30rpx 0 0 0;
		font-size: 32rpx;
	}

	.minfo {
		margin-left: 15rpx;
	}

	.preview-full {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 1002;
	}

	.preview-full video {
		width: 100%;
		height: 100%;
		z-index: 1002;
	}

	.preview-full-close {
		position: fixed;
		left: 32rpx;
		top: 25rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 60rpx;
		text-align: center;
		z-index: 1003;

		color: #fff;
		font-size: 65rpx;
		font-weight: bold;

	}

	.bitmap {
		margin-top: 10vh;
		text-align: center;
	}

	button {
		margin: 0;
		padding: 0;
		background-color: #fff;
		line-height: inherit;
		border-radius: 0;
		border: none;
		font-size: 32rpx;
	}

	.v_box {
		width: 100%;
		height: 100%;
	}

	.ii_video {
		width: 100%;
		height: 100%;
		object-fit: fill;
	}


	.phone_box {
		margin-left: auto;
		background-color: #4A84F6;
		color: white;
		font-size: 24rpx;
		box-sizing: border-box;
		padding: 8rpx 15rpx;
		border-radius: 10rpx;
	}

	.phone_name {
		margin-left: 10rpx;
	}

	.v_box {
		position: relative;
	}

	.play_img {
		width: 100rpx;
	}

	.play_img_box {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 100;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pl_box {
		background-color: white;
	}

	.btn {
		color: white;
		background-color: #E34305;
		font-size: 28rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
	}
</style>